<div class="main card">
  <form class="form-inline">
    <div class="input-group input-group-sm mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="inputGroup-sizing-sm">Course name</span>
      </div>
      <input type="text" [(ngModel)]="search.courseName" [ngModelOptions]="{standalone: true}"
             class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
      <div class="input-group-append">
        <button class="btn btn-outline-warning" type="button" (click)="search_course()">search course</button>
      </div>
    </div>
  </form>
  <div class="add_button">
    <button class="btn btn-info btn-sm" type="button" (click)="showCourseModel(1, courseModel, courseForm)">new Course
    </button>
  </div>
  <table class="table table-striped">
    <thead>
    <tr>
      <th scope="col">课程编号</th>
      <th scope="col">课程名称</th>
      <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let course of courseList; let index = index">
      <th scope="row">{{index +1 }}</th>
      <td>{{course.course_name}}</td>
      <td>
        <button class="btn btn-sm btn-outline-primary" (click)="showCourseModel(2, courseModel, course)">Edit</button>
        <button class="btn btn-sm btn-outline-danger" (click)="delCourse(course)">Doen</button>
      </td>
    </tr>
    </tbody>
  </table>
  <ng-template #courseModel let-modal style="width:1000px">
    <app-course-modal [courseForm]="courseForm" [modal]="modal" [courseType]="courseType"
                      (initData)="initData()"></app-course-modal>
  </ng-template>

</div>
